Crafting a Responsive HTML and CSS Footer (Source Code)

2024-06-18 19:22| 来源: 网络整理| 查看: 265

Learn HTML and CSS for a responsive website footer. Elevate user experience with our step-by-step guide on mobile-friendly footer design.

Join us on Telegram Crafting a Responsive HTML and CSS Footer.jpg

Read Also

Create a Sneaker Shoes Landing Page (Source Code) Table of Contents Project Introduction HTML Code CSS Code Preview Conclusion

Welcome to our detailed guide on creating a responsive footer using HTML and CSS. In today's digital landscape, where mobile devices play a pivotal role in web browsing, having a responsive footer is no longer a luxury鈥攊t's a necessity. A well-designed footer contributes to a seamless user experience, providing essential information and navigation options.

In this guide, we'll explore the key elements of a responsive footer, diving into the intricacies of HTML and CSS to help you craft a footer that not only adapts to various screen sizes but also elevates the overall aesthetics of your website. Whether you're a seasoned developer or just starting, this comprehensive tutorial will equip you with the knowledge and skills to create a footer that leaves a lasting impression.

Join us on this journey as we unravel the art of designing a responsive footer that not only meets technical standards but also enhances the user experience on your website. Let's get started!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our footer.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break down the provided HTML code step by step:

1. : This declaration defines the document type and version of HTML being used, in this case, HTML5.

2. : This is the root element of the HTML document. The lang attribute specifies the language of the document, which is set to English (en).

3. : This section contains meta-information about the HTML document, such as character set, viewport settings, title, and external resources.

: Specifies the character encoding for the document as UTF-8, which is a widely used character encoding. : Sets the viewport properties for responsive design, ensuring that the width is equal to the device width, and the initial zoom level is set to 1.0. Footer 3: Sets the title of the HTML document to "Footer 3". and : These lines establish preconnect hints for faster loading of external resources from Google Fonts. : Includes a stylesheet for the Google Fonts API, loading the "Poppins" font in weights 400, 500, and 600. : Includes another stylesheet for Google Fonts, loading the "Material Symbols Outlined" font with specific parameters. : Links an external CSS stylesheet located in the "src" directory.

4. : This is the main content of the HTML document.

: Defines the footer section of the document. : Represents an independent piece of content within the footer. Try Hologram today.: Displays a heading with the text "Try Hologram today." : Defines a button.

: Represents a paragraph within the button with the text "Sign up free." trending_flat : Includes a span element with a class for styling, and displays the text "trending_flat" using a special material symbol. : Represents the top section of the footer. : Embeds an image with the specified source URL. : Defines an unordered list. List items () with headings () and anchor () elements. This structure forms a navigation menu with links categorized under "Resources," "Pricing," "Developers," and "Company." 漏 2023 Hologram: Represents the bottom section of the footer, displaying a copyright notice.

5. : Closes the footer section.

6. : Closes the body section.

7. : Closes the HTML document.

This is the basic structure of our footer using HTML, and now we can move on to styling it using CSS.

Read Also

Create a Glassmorphism Calendar with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the footer is in place, the next step is to add styling to the footer using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our footer.

Let's break down the code into paragraphs for better understanding:

1. Body Styling:

The styling for the overall body of the webpage is defined first. The background is set to a light color (#f8f9fb), and the font family is specified as "Euclid Circular A" with a fallback to "Poppins" in case the former is not available.

2. Universal Box Sizing:

The universal selector (*) is used to apply the box-sizing property to all elements, ensuring that the box model includes padding and border in the element's total width and height.

3. Footer Styling:

The footer section is styled to be fixed at the bottom of the page with a specific background color (#0a1535) and text color (#f9f9f9). Inside the footer, an article element is further styled with flexbox properties, a gradient background, and a border-radius, creating a visually appealing container.

The h2 and button elements within the footer article are also styled. The heading has a specific font weight and color, while the button is designed with flex properties, background color, and border-radius, making it consistent with the overall footer design.

4. Responsive Design:

Media queries are used to make the design responsive. For screens wider than 480 pixels, adjustments are made to the button width in the footer article and padding in the top section's unordered list.

For screens wider than 600 pixels, additional changes are applied. The flex direction of the footer article is altered, the minimum height is set, and adjustments are made to the button width and padding. The number of columns in the top section's unordered list is also modified.

5. Top Section Styling:

The top section of the page is further styled. It includes padding, margin, and styling for images, unordered lists, list items, and anchor links. The layout of the unordered list is defined using grid properties.

6. Bottom Section Styling:

The bottom section of the page is styled with padding, a top border, and specific color and font-size properties.

This will give our footer an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body { background: #f8f9fb; font-family: "Euclid Circular A", "Poppins"; } * { box-sizing: border-box; } footer { position: fixed; left: 0; bottom: 0; right: 0; padding-bottom: 20px; background: #0a1535; color: #f9f9f9; } footer article { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 50px 40px; margin: -99px 20px 20px; border-radius: 10px; background: linear-gradient(90deg, #773ecb, #2663ff); } footer article h2 { font-weight: 400; color: rgb(255 255 255 / 70%); } footer article button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 40px 0 44px; width: 100%; background: #0a1536; border: 0; border-radius: 30px; color: #f9f9f9; font-family: inherit; font-size: 16px; } footer section { padding: 0 50px; } section.top { padding-top: 30px; margin-bottom: 48px; } section.top img { display: block; height: 30px; margin: 0 0 30px; } section.top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); } @media (width > 480px) { footer article button { width: 70%; } section.top ul { padding-right: 10%; } } @media (width > 600px) { footer article { flex-direction: row; min-height: 140px; margin: -70px 20px 20px; padding: 30px 50px 30px; } footer article button { width: auto; padding: 0 20px 0 24px; } section.top ul { grid-template-columns: repeat(4, 1fr); padding-right: 0; } } section.top ul li a { display: block; margin-bottom: 10px; color: rgb(255 255 255 / 90%); } section.top h3 { color: rgb(255 255 255 / 40%); font-weight: 400; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; } section.bottom { padding-top: 10px; border-top: 2px solid rgb(255 255 255 / 10%); color: rgb(255 255 255 / 40%); font-size: 13px; }

Final Output:

Crafting a Responsive HTML and CSS Footer.gif